<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
    <style>
        .small {
            height: 200px;
            overflow: scroll;
            border: 1px solid black;
        }
        .big {
            height: 2000px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- stop 阻止单击事件继续冒泡 -->
        <!-- 修饰符可以串联 -->
        <div @click="doThis" style="padding:5px;background-color:#ccc">
            <a @click.stop.prevent="doThis" href="https://www.baidu.com">百度</a>
        </div>
        <hr>

        <!-- 提交事件不再重载页面 -->
        <form @submit.prevent="onSubmit"></form>

        <!-- 只有修饰符 -->
        <form @submit.prevent action="https://www.baidu.com">
            <input type="text">
            <button>提交</button>
        </form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div @click.capture="doThis" :style="styleObj">
            <a @click.prevent="doThis" href="https://www.baidu.com">百度</a>
        </div>
        <hr>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div @click.self="doThis" :style="styleObj">
            <!-- 没有给a添加click事件处理函数 仅仅阻止其默认行为 -->
            <a @click.prevent href="https://www.baidu.com">百度</a>
        </div>

        <!-- 点击事件将只会触发一次 -->
        <a @click.once="doThis">点我</a>

    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    name: 'Vue.js',
                    styleObj: {
                        backgroundColor: "#ccc",
                        padding: 5
                    },
                }
            },
            methods: {
                doThis(event) {
                    console.log("doThis", event.currentTarget);
                },
                // onScroll(e){
                //     console.log("onScroll");
                //     console.log(e);
                //     e.preventDefault()
                // }
            }
        }).mount('#app')
    </script>
</body>

</html>